import VueRouter from 'vue-router';
import Vue from 'vue';
/*import Home from '../components/home';
import About from '../components/about';
import User from '../components/user';*/

// 路由懒加载
const Home = () => import('../components/home');
const About = () => import('../components/about');
const User = () => import('../components/user');
const News = () => import('../components/homeNews');
const Messages = () => import('../components/homeMessages');
const Profile = () => import('../components/profile');
// 1、安装vue-router插件
Vue.use(VueRouter);

const routes = [
  {path: '/', redirect: '/home'},
  {
    path: '/home',
    component: Home,
    // 嵌套组件路由
    children: [
      /*{
        path: "/",
        redirect: 'news'
      },*/
      {
        path: 'news',
        component: News
      },
      {
        path: 'messages',
        component: Messages
      }
    ],
    meta: {title: '首页'}
  },
  {path: '/about', component: About, meta: {title: '关于'}},
  {path: '/user/:userId', component: User, meta: {title: '用户 '}},
  {path: '/profile', component: Profile, meta: {title: '档案'}}

]

// 2、创建VueRouter实例
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
});

// 全局导航守卫 --> 前置守卫
router.beforeEach((to, from, next) => {
  window.document.title = to.matched[0].meta.title;
  // console.log('beforeEach');
  // console.log(to);
  next();
})
// 全局导航守卫 --> 后置钩子
router.afterEach((to,from,next)=>{
  // console.log('afterEach');
})

// 3、导出vueRouter实例并挂载到vue实例
export default router;





